<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
		<title>评论</title>
		<style> 
			#comment {
				font-size: 18px;
				margin-left: -30px;
			}
			#comment li {
			   float: left;
			}
			ul {
			   list-style: none;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					 aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="../index.html"><img class="navbar-brand" src="../img/c_logo2020.png" /></a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="../index.html">注册 <span class="sr-only">(current)</span></a></li>
						<li><a href="../html/登陆.html">登录</a></li>
						<li><a href="../html/报名.html">报名</a></li>
						<li class="active"><a href="../html/评论.html">评论</a></li>

				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
		<div class="container">
			<div class="jumbotron" style="background-image: url(../img/016.jpg); background-size: cover; height: 400px;">
				<p class="text-right" style="margin: 280px 0;"><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
			</div>
		</div>
		<hr />
		<div class="container">
			<div class="row">
				<b class="col-sm-6">200条评论</b>
				<p class="col-sm-6 text-right">切换为时间排序</p>
			</div>
			<h4>精选评论 (1)</h4>
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" src="../img/tx.jpg" alt="...">
					</a>
					12**345
				</div>
				<div class="media-body">
					<h4 class="media-heading">★★★★★ <span class="label label-info">行程安排：满意</span> <span class="label label-info">描述相符：很满意</span>
						<span class="label label-info">导游讲解：很满意</span></h4>
					</h4>
					感谢阿怀导游的幸苦陪同！耐心、负责任、👍</br>
					<small style="color: gray;">2019-12-22 16:01</small>
				</div>
			</div>
			<h4>评论 (200)</h4>
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" src="../img/tx2.jpg" alt="...">
					</a>
					23**456
				</div>
				<div class="media-body">
					<h4 class="media-heading">★★★☆☆ <span class="label label-info">行程安排：满意</span> <span class="label label-danger">描述相符：不满意</span>
						<span class="label label-info">导游讲解：很满意</span></h4>
					</h4>
					路线安排合理，导游也很贴心，讲解很耐心，没有强迫和隐性消费，开心！下次旅行还找这家。</br>
					<small style="color: gray;">2019-12-22 16:01</small>
				</div>
			</div>
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" src="../img/tx3.jpg" alt="...">
					</a>
					56**789
				</div>
				<div class="media-body">
					<h4 class="media-heading">★★★★☆ <span class="label label-warning">行程安排：满意</span> <span class="label label-info">描述相符：很满意</span>
						<span class="label label-info">导游讲解：很满意</span></h4>
					三亚真的很美 这次跟团体验也很不错 蜈支洲我会再来的。</br>
					<small style="color: gray;">2019-10-07 16:16</small>
				</div>
			</div>
		</div></br>
		<div class="container">
			<div class="row">
				<hr/>
				<div class="col-sm-1">
					<img src="../img/tx4.jpg"/>
					<p>6789101112</p>
				</div>
				<div class="col-sm-10">
					<ul id="comment">
						<li>☆</li>
						<li>☆</li>
						<li>☆</li>
						<li>☆</li>
						<li>☆</li>
					</ul>
					<form>
						<div class="form-group">
							<textarea class="form-control"  placeholder="写下你的评论..." rows="3"></textarea>
						</div>
						<div class="form-group">
							<button type="submit" class="btn btn-default">评论</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<br />
		<hr />
		<div class="container">
			<div class="row">
				<div class="col-sm-3" style="border-right: #DDDDDD 1px solid;border-left: #DDDDDD 1px solid;">
					<h4>为什么选携程</h4>
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="../img/pg.png" alt="...">
							</a>
						</div>
						<div class="media-body">
							<h5 class="media-heading">放心的服务</h5>
							<p>领先的服务标准 独创的保障体系</p>
						</div>
					</div>
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="../img/pg2.png" alt="...">
							</a>
						</div>
						<div class="media-body">
							<h5 class="media-heading">放心的价格</h5>
							<p>具竞争力的价格 无任何隐形费用</p>
						</div>
					</div>
				</div>

				<div class="col-sm-3 " style="border-right: #DDDDDD 1px solid;">
					<h4>旅游资讯</h4>
					<div class="media">
						<div class="media-body">
							<p>宾馆索引</p>
							<p>机票索引</p>
							<p>旅游索引</p>
							<p>邮轮索引</p>
							<p>用车索引</p>
						</div>
						<div class="media-body">
							<p>攻略索引</p>
							<p>网站导航</p>
							<p>火车票索引</p>
							<p>企业差旅索引</p>
						</div>
					</div>
				</div>

				<div class="col-sm-3" style="border-right: #DDDDDD 1px solid;">
					<h4>加盟合作</h4>
					<div class="media">
						<div class="media-body">
							<p></p>
							<p>分销联盟</p>
							<p>广告业务</p>
							<p>保险代理</p>
							<p>酒店加盟</p>
							<p>智慧旅游</p>
						</div>
						<div class="media-body">
							<p>友情链接</p>
							<p>企业礼品卡采购</p>
							<p>代理合作</p>
							<p>目的地及景区合作</p>
							<p>更多加盟合作</p>
						</div>
					</div>
				</div>

				<div class="col-sm-3" style="border-right: #DDDDDD 1px solid;">
					<h4>关于携程</h4>
					<div class="media">
						<div class="media-body">
							<p></p>
							<p>关于携程</p>
							<p>联系我们</p>
							<p>旅游度假资质</p>
							<p>用户协议</p>
							<p>营业执照</p>
							<p>携程信用卡</p>
						</div>
						<div class="media-body">
							<p>携程热点</p>
							<p>诚聘精英</p>
							<p>隐私政策</p>
							<p>安全中心</p>
							<p>知识产权</p>
						</div>
					</div>
				</div>
			</div>
			<p class="text-center">Copyright © 2016-2018 ICP 备888888号</p>
			<p class="text-center"><img src="../img/timg.jpg" class="text-center" />沪公网备31234567891011号</p>
		</div>
		<script src="../js/jquery-2.1.0.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script type="text/javascript">
			var star="★";
			var nstar="☆";
			$("#comment li").on("mouseenter", function() {
				$(this).text(star).prevAll().text(star).end().nextAll().text(nstar);
			}).on("mouseleave", function() {
				$("#comment li").text(nstar);
				$("#comment li[index='check']").text(star).prevAll().text(star);
			}).on("click", function() {
				$(this).attr("index", "check").siblings().removeAttr("index");
			})
		</script>
	</body>
</html>
